/**
 * 标签栏
 * @author yan
 * @data 2014-03-12
 *
 * 限制标签总数，超出的则替换掉已打开的标签。
 *
 *
 *
 */

define(['jquery'], function($) {
  'use strict';

  var $nav = $('#tabsbar-nav')
  var $frames = $('#frames')
  var clock
  var tabs = {
    init: function() {
      this.tabs = [] // 索引与 <li> 一致
      this.curr = 0 // 当前标签索引
      this.max = 4 // 最大标签数
    },
    /**
     * 打开标签栏
     * @param  {object} link 链接参数
     * @public
     */
    open: function(link) {
      var tabs = this.tabs
      var len = tabs.length
      var i, inner, j, id;

      // console.log('open', this)
      clock = setTimeout(function() {
        $("#frame-loading").show()
      }, 1200)

      // 先检查是否已有标签
      if (len) {
        for (i = 0; i < len; i++) {
          if (link.id === tabs[i].id) {
            // 有的 url 只是改变参数，而 id 不变
            tabs[i] = link
            // 一些菜单再次打开后需要刷新
            // TODO: 切换标签没有刷新，问题仍然存在。
            // 为避免抖动重建 iframe
            $('#frame_' + link.id).remove()
            $('<iframe src="' + link.url + '" class="frame" id="frame_' + link.id +
          '" frameborder="0"></iframe>').appendTo($frames)
            this.to({
              index: i,
              id: link.id,
              url: link.url
            })

            return
          }
        }
      }

      // data-id 放到 a.text 上方便 <li> 替换
      inner = '<i class="favicon"></i>' +
        '<a class="text" href="' + link.url + '" title="' + link.title +
        '" data-id="' + link.id + '">' + link.title +
        '</a><i class="close"></i><i class="divider"></i>'

      // 未达到最大数目限制时在最后面添加新标签
      if (len < this.max) {
        i = len ? len : 0 // 初始化
        $('<li>' + inner + '</li>').appendTo($nav)
        this.$lis = $nav.children('li')
        $('<iframe src="' + link.url + '" class="frame" id="frame_' + link.id +
          '" frameborder="0"></iframe>').appendTo($frames)
      }
      // 达到最大数目限制时替换最早打开的标签
      else {
        // 比较时间戳
        i = 0
        for (j = 1; j < len; j++) {
          i = parseInt(tabs[j].stamp, 10) < tabs[i].stamp ? j : i
        }

        this.$lis.eq(i).html(inner)
        // 删除标签对应的 iframe
        // 是否在此时改变 src 呢
        // $('#frame_' + tabs[i].id)
        //   .removeClass('active')
        //   .attr('id', 'frame_' + link.id)
        //   .attr('src', link.url)
        $('#frame_' + tabs[i].id).remove()
        $('<iframe src="' + link.url + '" class="frame" id="frame_' + link.id +
          '" frameborder="0"></iframe>').appendTo($frames)
      }

      tabs[i] = link
      this.to({
        index: i,
        id: link.id,
        url: link.url
      })
    },
    to: function(obj) {
      var $li = this.$lis.eq(obj.index)
      var active = 'active'
      // 只有一个标签时始终 active
      if (this.tabs.length !== 1) {
        this.$lis.eq(this.curr).removeClass(active)
        $frames.children('.' + active).removeClass(active)
      }
      $li.addClass(active)
      this.curr = obj.index
      var id = obj.id || $li.children('.text').data().id
      var $frame = $('#frame_' + id)
      var url = obj.url
      $frame.addClass(active)
      $frame.load(function() {
        clearTimeout(clock)
        $("#frame-loading").fadeOut();
      })
      if (url && $frame.attr('src') !== url) {
        $frame.attr('src', url)
      }
    },
    navto: function(obj) {
        var $li = this.$lis.eq(obj.index)
        var active = 'active'
        // 只有一个标签时始终 active
        if (this.tabs.length !== 1) {
          this.$lis.eq(this.curr).removeClass(active)
          $frames.children('.' + active).removeClass(active)
        }
        $li.addClass(active)
        this.curr = obj.index
        var id = obj.id || $li.children('.text').data().id
        var $frame = $('#frame_' + id)
        var url = obj.url
        $frame.addClass(active)
        clearTimeout(clock)
        $("#frame-loading").fadeOut();
        if (url && $frame.attr('src') !== url) {
          $frame.attr('src', url)
        }
      },
    close: function(index, id) {
      var last = this.tabs.length - 1
      var $li, t;

      // 只有一个标签时 last = 0 , 保留此标签
      if (!last) {
        return
      }

      // 关闭标签时，位置最后的激活它前面的标签, 其它情况激活它后面的标签
      t = index < last ? index : index - 1
      this.tabs.splice(index, 1)
      this.$lis.eq(index).remove()
      // 更新下
      this.$lis = $nav.children('li')
      $('#frame_' + id).remove()
      this.to({
        index: t
      })
    }
  }

  $nav
    .on('click', '.close', function(e) {
      var $this = $(this)
      var $parent = $this.parent()
      var i = $parent.index()
      if (i > -1) {
        tabs.close(i, $parent.children('.text').data().id)
      } else {
        throw new Error('can not get the index of current li')
      }
      return false
    })
    .on('click', 'li', function(e) {
      var $this = $(this)
      if (!$this.hasClass('active')) {
        tabs.navto({
          index: $this.index()
        })
      }
    })
    .on('click', '.text', function(e) {
      e.preventDefault()
    })

  tabs.init()
  return tabs
})
